// package_tools/pages/recordList/recordList.js
const {
    formatTime
} = require('../../../utils/util');

function getTimeStr(interval) {
    // 拿到经过的秒
    // 进行换算
    const sec = Math.floor(interval / 1000)
    const h = Math.floor(sec / 3600) < 10 ? '0' + Math.floor(sec / 3600) : '' + Math.floor(sec / 3600);
    const m_s = sec % 3600;
    const m = Math.floor(m_s / 60) < 10 ? '0' + Math.floor(m_s / 60) : '' + Math.floor(m_s / 60);
    const s = m_s % 60 < 10 ? '0' + m_s % 60 : '' + m_s % 60;
    return h + ':' + m + ':' + s
}
Page({

    /**
     * 页面的初始数据
     */
    data: {
        soundList: [],
        curplayer: -1, // 没有进行任何播放
        AudioContext: null,
        isPlay:false,
        timer:null
    },
    player() {

    },
    handlePlay(e) {
        // console.log(e, "播放对象")
        const targetIndex = e.currentTarget.dataset.active;
        if (e.currentTarget.dataset.active === this.data.curplayer) {
            // 代表当前播放的音乐点了第二次,需要将当前的音乐暂停 播放栏不收起来
           // 判断当前是否在播放 如果
                // 当前正在播放 将当前数据设为暂停播放
                // 根据当前状态清除或开启定时器

            const temp =  this.data.soundList.map((item,index)=>{
                 if(index === targetIndex){
                    return {
                        ...item,
                        isPlay:!this.data.isPlay
                    }
                 }else{
                     return {
                         ...item,
                         isPlay:false
                     }
                 }
             })
            //  this.data.isPlay 是当前的播放状态
            if(this.data.isPlay){
                //当前正在播放 点击暂停
                //清除计时器
                this.data.AudioContext.pause()
                this.timerClose();
            }else{
                //当前暂停状态 需要播放 开启定时器
                this.startTimer(targetIndex)
                this.data.AudioContext.play()
            }

             this.setData({
                soundList:temp,
                isPlay:!this.data.isPlay
             })
           
            
        } else {
            // 代表点击了其他播放的音乐
            // 当前页面记录的播放索引和点击的播放索引不同 所以开始播放其他音乐,
            // 将列表中其他项的width置为0
            // 现在展开的组件就需要关闭
            this.setData({
                'AudioContext.src':this.data.soundList[targetIndex].path
            })
           const temp =  this.data.soundList.map((item,index)=>{
                if(index ===targetIndex){
                    return {
                        ...item,
                        show:true,
                        isPlay:true,
                        width:'0%'
                    }
                    
                }else{
                    // 统一收起来
                    return {
                        ...item,
                        show:false,
                        isPlay:false,
                        width:'0%'
                    }
                }
            })
            // 让当前点击的音乐进行播放
            // 调用接口播放音乐
            this.data.AudioContext.play()
            this.setData({
                soundList:temp,
                isPlay:true
             })
             // 计时器逻辑
             // 清除页面上的所有计时器
             clearInterval(this.data.timer);
             this.setData({
                timer:null
             })

             // 重新开启一个计时器
             this.startTimer(targetIndex)
           
            
        }

        // 找到当前对象进行播放
        this.setData({
            curplayer: targetIndex
        })

    },
    handleOver(){
        // 触发主动结束的事件
        // 需要调用音频结束接口
        this.data.AudioContext.stop()
        // 和自然结束的事件相同
        // console.log('手动结束')
        this.soundOver()
        
    },
    handleDelete(e){
        // 删除音频
        
        // 拿到要删除的index
        wx.showLoading({
          title: '删除中',
        })
        const targetIndex = e.currentTarget.dataset.active;
        // 在本地存储中删除
        const temp = wx.getStorageSync('soundRecord');
        temp.splice(targetIndex,1);
        // 重新存储
        wx.setStorage({
            key:'soundRecord',
            data:temp,
            success:()=>{
                // 删除当前页面的列表
                const tempArr = [...this.data.soundList];tempArr.splice(targetIndex,1);
                // 因为涉及到到索引操作 所以要重置索引
                // 关闭计时器
                // 结束音乐播放

               
                // 结束音频播放
                this.data.AudioContext.stop();
                this.soundOver('0%');
                this.setData({
                    soundList:tempArr,
                    isPlay:false,
                    curplayer:-1
                })
                wx.hideLoading();
                wx.showToast({
                  title: '删除成功',
                  icon:'success'
                })
            }
        })
    },
    startTimer(targetIndex){
        let base;
        const targetDuration = this.data.soundList[targetIndex].realDuration;
        const x = Math.floor(100/targetDuration);
        const timer = setInterval(()=>{
            // 拿到当前项目的index
            // targetIndex是当前点击的索引
            base = parseInt(this.data.soundList[targetIndex].width);
            let newVal = base+x;
            // 设置;
            if(newVal>100){
                newVal =100
            }
            // console.log(targetIndex)
            this.setData({
                [`soundList[${targetIndex}].width`]:newVal+'%'
            })
         },1000)
         this.setData({
            timer:timer
        })
    }, 
    timerClose(){
        // console.log(111)
        clearInterval(this.data.timer);
        this.setData({
            timer:null
        })
    },
    soundOver(progress='100%'){
        this.timerClose();
        const targetIndex = this.data.curplayer;
        this.setData({
            [`soundList[${targetIndex}].width`]:progress,
            [`soundList[${targetIndex}].isPlay`]:false,
            [`soundList[${targetIndex}].show`]:false,
            curplayer:-1,
            isPlay:false
        })
       

    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        // 页面一显示就从本地存储拿到当前的录音列表
        wx.getStorage({
            key: 'soundRecord',
            complete: (res) => {
                // console.log(res)
                // 将数据进行格式化


                const soundArr = res.data || [];
                const targetArr = soundArr.map(item => {

                    return {
                        realDuration:item.duration/1000,
                        duration: getTimeStr(item.duration),
                        time: formatTime(item.timeStamp),
                        size: Math.floor(item.fileSize / 1024) + 'KB',
                        title: item.title,
                        path: item.path,
                        show: false,
                        isPlay:false,
                        width:'0%'
                    }
                })
                this.setData({
                    soundList: targetArr
                })
            }
        })
        // 创建全局唯一播放对象
        const AudioContext = wx.createInnerAudioContext();
        AudioContext.autoplay = true
        this.setData({
            AudioContext
        })
        // 注册事件监听函数
        // console.log(this.data.AudioContext)
        this.data.AudioContext.onPlay(() => {
            // console.log('开始播放')
          })
          this.data.AudioContext.onPause(() => {
            // console.log('暂停了')
          })
          // 监听音频仔饭播放到结束的事件
          this.data.AudioContext.onEnded(()=>{
              // 将暂停的按钮变成播放的按钮
              // 进度条置为0
              // 结束计时器
              // 当前的播放器的状态为停止播放
              //当前播放的音乐为-1
            //   this.timerClose();
            //   const targetIndex = this.data.curplayer;
            //   this.setData({
            //       [`soundList[${targetIndex}].width`]:'100%',
            //       [`soundList[${targetIndex}].isPlay`]:false,
            //       [`soundList[${targetIndex}].show`]:false,
            //       curplayer:-1,
            //       isPlay:false
            //   })
            this.soundOver()
          })
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})